<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>for</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<ul id="example1">
  <li v-for="item in items">
    {{item.user}}
  </li>
</ul>
<ul id="example2">
  <li v-for="value of object">
    {{value}}
  </li>
</ul>
<div id="example3">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="E.g. Feed the cat"
    >
    <button>ADD</button>
  </form>
  <ul>
    <li
     is="todo-item"
     v-for="(todo,index) in todos"
     v-bind:key="todo.id"
     v-bind:title="todo.title"
     v-on:remove="todos.splice(index,1)"
    >

    </li>
  </ul>
</div>
<script>
  var vm1 = new Vue({
    el: '#example1',
    data: {
      items: [
        {
          user: {
            name: 'hey',
            age: 18,
            phone: 18380807232
          }
        },
        {
          user: {
            name: 'hhh',
            age: 20,
            phone: 123
          }
        }
      ]
    }
  })
  var vm2 = new Vue({
    el: '#example2',
    data: {
      object: {
        name: 'hey',
        age: 18,
        phone: 18380807232
      }
    }
  })
  //自定义todo-item组件
  Vue.component('todo-item',{
    template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">Remove</button>\
    </li>\
  ',
    props: ['title']
  })
  var vm3 = new Vue({
    el: '#example3',
    data: {
      newTodoText: '',
      todos: [
        {
          id: 1,
          title: 'Do the dishes'
        },
        {
          id: 2,
          title: 'take out the trash'
        }
      ],
      nextTodoId: 4
    },
    methods: {
      addNewTodo: function () {
        this.todos.push({
          id: this.nextTodoId++,
          title: this.newTodoText
        })
        this.newTodoText = ''
      }
    }
  })
</script>
</body>
</html>
